<#assign path = request.getContextPath() />
<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>批量导入照片</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="${path}/static/css/font.css">
        <link rel="stylesheet" href="${path}/static/css/css.css">
		<link rel="stylesheet" type="text/css" href="${path}/static/css/xadmin.css"/>
        <script type="text/javascript" src="${path}/static/lib/layui/layui.js"></script>
        <script type="text/javascript" src="${path}/static/js/xadmin.js"></script>

    </head>
    <body>
        <div class="layui-fluid">
                <div class="layui-row">
                        <button type="button" class="layui-btn layui-btn-normal" name="file" id="choiceList"><i
                                class="iconfont icon-e645"></i>选择照片
                        </button>
                        <button type="button" class="layui-btn layui-btn-normal" id="choiceListAction">开始上传</button>
                        <button type="button" class="layui-btn layui-btn-normal" onclick="exportErrorInfo()">导出失败信息</button>
                        <button type="button" class="layui-btn layui-btn-normal" onclick="clearError()">清空失败信息</button>
                    <#--</div>-->

                <#--<textarea class="border">-->
                <#--批量导入员工照片，请用学生身份证号对照片进行命名！-->
                <#--</textarea>-->
                      <div class="layui-upload-list">
                        <table class="layui-table">
                          <thead>
                        <tr><th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                          </tr></thead>
                          <tbody id="demoList"></tbody>
                        </table>
                      </div>
                </div>
        </div>
    </body>
    <script>
        layui.use('upload', function() {
            var $ = layui.jquery
                    , upload = layui.upload;
            //多文件列表示例
            var demoListView = $('#demoList')
                    , uploadListIns = upload.render({
                elem: '#choiceList'
                , url: '/api/employee/upload/faces/guest'
                , accept: 'jpg|png'
                , multiple: true
                , auto: false
                , bindAction: '#choiceListAction'
                , choose: function (obj) {
                    var files = this.files = obj.pushFile();
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + file.name + '</td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));
                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });
                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });
                        demoListView.append(tr);
                    });
                }
                , done: function (res, index, upload) {
                    console.log(index);
                    if (res.status == 200) {
                        var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index];
                    } else {
                        var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    }
                }
                , error: function (index, upload) {
                }
            });
        });

        // 清空失败信息
        function clearError() {
                $.ajax({
                    url: '/api/employee/upload/export/clear',
                    type: 'POST',
                    success: function (data) {
                        console.log(data);
                        if (data.status == 200) {
                            layer.msg('清理成功',{
                                icon: 6
                            });
                        } else {
                            layer.msg('清理失败',{
                                icon: 6
                            });
                        }
                    }
                });
        }
        // 导出失败信息
        function exportErrorInfo() {
            window.open("/api/employee/upload/export", "_self");
        }

    </script>
</html>
